<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!-- PAGE CONTENT WRAPPER -->
<div class="page-content-wrap">
    <div class="row">
        <div class="col-md-12">

            <form class="form-horizontal">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title" id="title"></h3>
                        <ul class="panel-controls">
                            <li><a href="/admin/option/manageQuestionnaire.jspa"><i class="fa fa-arrow-left"></i></a>
                            </li>
                        </ul>
                    </div>
                    <div class="panel-body">
                        <p>查看问卷详情。</p>
                    </div>

                    <div class="panel-body">
                        <div class="row">
                            <div class="form-group">
                                <label class="col-md-3 control-label">问卷名称</label>
                                <div class="col-md-8">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                        <input type="text" class="form-control" id="qname"
                                               value="${questionnaire.name}"/>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">预定时间</label>
                                <div class="col-md-8">
                                    <div class="input-group">
                                            <span class="input-group-addon"><span
                                                    class="glyphicon glyphicon-calendar"></span></span>
                                        <input class="form-control " id="publishTime"
                                               value="${questionnaire.publishTime}">
                                    </div>
                                    <div id="publishTimeValid"></div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">至</label>
                                <div class="col-md-8">
                                    <div class="input-group">
                                            <span class="input-group-addon"><span
                                                    class="glyphicon glyphicon-calendar"></span></span>
                                        <input class="form-control " id="endTime"
                                               value="${questionnaire.endTime}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">表单名称</label>
                                <div class="col-md-8">
                                    <div class="input-group">
                                        <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
                                        <input type="text" class="form-control"
                                               value="${questionForm.name}"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <c:forEach items="${groups}" var="group" varStatus="state">
                            <div id="groupAndQuestions" class="panel-body col-md-6">
                                <table id="table-${state.index}" class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>组名称</th>
                                        <th colspan="2"><input id="group-${state.index}" type="text"
                                                               class="form-control"
                                                               value="${group.questionGroup.name}">
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${group.questions}" var="question" varStatus="qState">
                                        <tr class="question">
                                            <td>问题<span>${qState.index+1}</span>标题</td>
                                            <td colspan="2"><input id="question-${state.index}-${qState.index}"
                                                                   type="text" class="form-control"
                                                                   value="${question.title}"></td>
                                        </tr>
                                        <tr style="display: none">
                                            <td>问题<span>${qState.index+1}</span>选项</td>
                                            <td>
                                                <div id="question-choice-${state.index}-${qState.index}"
                                                     class="form-group">
                                                    <c:if test="${not empty question.option1}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-0"
                                                                   type="text" placeholder=""
                                                                   class="form-control" value="${question.option1}">
                                                        </div>
                                                    </c:if>
                                                    <c:if test="${not empty question.option2}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-1"
                                                                   type="text" placeholder=""
                                                                   class="form-control" value="${question.option2}">
                                                        </div>
                                                    </c:if>
                                                    <c:if test="${not empty question.option3}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-2"
                                                                   type="text" placeholder=""
                                                                   class="form-control" value="${question.option3}">
                                                        </div>
                                                    </c:if>
                                                    <c:if test="${not empty question.option4}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-3"
                                                                   type="text" placeholder=""
                                                                   class="form-control" value="${question.option4}">
                                                        </div>
                                                    </c:if>
                                                    <c:if test="${not empty question.option5}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-4"
                                                                   type="text" placeholder=""
                                                                   class="form-control" value="${question.option5}">
                                                        </div>
                                                    </c:if>
                                                    <c:if test="${not empty question.option6}">
                                                        <div class="col-md-2">
                                                            <input id="choice-${state.index}-${qState.index}-5"
                                                                   type="text" placeholder=""
                                                                   class="form-control" value="${question.option6}">
                                                        </div>
                                                    </c:if>
                                                </div>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                        </c:forEach>
                        <div class="panel-footer">
                            <span class="btn btn-primary pull-right" onclick="javascript:window.location.href='/admin/option/manageQuestionnaire.jspa'">返回</span>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>

</div>
<!-- END PAGE CONTENT WRAPPER -->
<script>


    $(function () {
        $("input").attr("disabled","true").css("color","black");
        $('#title').html('查看问卷' );
    });
</script>
